<template>
    <div class="box">
        <!-- 标签 -->
        <button @click="clickHandler">按钮1</button>

        <button @xxx="xxxHandler">按钮2</button>

        <!-- 组件 -->
        <Event1 @click="clickHandler"></Event1>

        <Event1 @xxx="xxxHandler"></Event1>

        <!-- 将click变成一个原生事件,使用.native 修饰符 -->
        <Event1 @click.native="clickHandler"></Event1>

        <hr>

        <button @click="btnClickHandler">按钮2</button>
        <button @click="btnClickHandler(25)">按钮3</button>
        <button @click="btnClickHandler($event, 25)">按钮4</button>

        <br><br><br>

        <Event2 @customEvent="eventHandler"></Event2>
        <Event2 @customEvent="eventHandler(35)"></Event2>
        <Event2 @customEvent="eventHandler($event, 35)"></Event2>
    </div>
</template>

<script>
// 事件
// 原生标签
//      绑定原生事件
//          事件类型:  click、mouseenter、mouseleave。。。等
//              特点:  一定是有限个数
//          触发机制:  当点击之后,是浏览器触发的
//      绑定自定义事件 - 原生标签绑定自定义事件是没有意义的
//          事件类型:  xxx, 自己定义
//          触发机制:  无法触发
// 组件标签
//      绑定原生事件
//          事件类型:  click
//          触发机制:  不能触发
//          总结: 当组件标签绑定原生事件的时候,会理解成自定义事件,需要自己手动触发
//          问题: 如果想让 click 变成一个原生事件可不可以?
//                  可以: 使用修饰符 .native 可以将click变成一个原生事件
//      绑定自定义事件
//          事件类型:  xxx
//          触发机制:  自己触发,在子组件的内部使用 $emit 触发
// ------------------------------------------------------------------
// 关于参数
// 原生事件的参数
//      原生事件的参数,默认不传的时候,在会调用中参数一使用e接收,接收到的是 事件对象
//          <button @click="btnClickHandler">按钮2</button>
//      原生事件的参数,默认传参的时候,在会调用中参数一使用e接收,接收到的是 小括号中的参数
//          <button @click="btnClickHandler(25)">按钮3</button>
//      原生事件的参数,既想要事件对象,又想要自己传参
//          <button @click="btnClickHandler($event, 25)">按钮4</button>
//      $event从哪来?
//          这个$event在脚手架项目中查看太麻烦,去原生的vue.js文件中查看
//          当回调不加小括号的时候,事件的回调函数直接传递给底层了
//          当回调加小括号的时候,此时底层上把传入的回调包裹了一层,变成 ƒ ($event){return btn2Handler(22)}
//              所以加小括号的时候,需要传递事件对象的时候,必须使用$event,因为$event是包裹的这一层的形参
//      那为什么 this 和 小括号同时存在的时候,会报错?
//          <button @click="this.btn5Handler(25)">按钮5</button>
//              这个button绑定的回调加了小括号,那么底层上传入的函数包裹了一层,变成了如下样子
//          fns = ƒ ($event){return this.btn5Handler(25)}
//              当点击按钮的时候,真正执行的是fus,报错的原因是因为这个fns中的this指向发生了变化,不再指向 vue 实例
//              当在非严格模式和下,这个this指向window,当在严格模式下,这个this是undfined(注意:脚手架项目就是严格模式)
// 自定义事件的参数
//      1.自定义事件是自己去触发的,参数需要自己传递,没有事件对象
//      2.自定义事件如果在绑定的回调上加上小括号传参,底层变成
//          <Event2 @customEvent="eventHandler(35)"></Event2>
//          fns = f($event){return eventHandler(35)}
//      3.既想拿到子组件传过来的31,又想拿到自己在模板中写的35,怎么办?
//          <Event2 @customEvent="eventHandler($event, 35)"></Event2>
//          底层变成
//          fns = f($event){return eventHandler($event, 35)}
//      总结: 自定义事件的 $event 是参数,由自己传递
import Event1 from './Event1.vue'
import Event2 from './Event2.vue'
export default {
    name: "EventTest",
    components: { Event1, Event2 },
    methods: {
        clickHandler(e) {
            console.log('我爱你', e.target)
        },
        xxxHandler() {
            console.log('xxx触发')
        },
        // -------------------
        btnClickHandler(e, arg) {
            console.log('参数', e, arg);
        },
        eventHandler(e, arg1) {
            console.log('参数', e, arg1)
        }
    }
}
</script>

<style scoped>

</style>